<script setup>
import { ref, reactive, getCurrentInstance, watch, onMounted } from "vue"

const instance = getCurrentInstance();
const _this = instance.appContext.config.globalProperties //vue3获取当前this

// 组件中使用，接收传参的
let propsData = defineProps({
  show: {
    type: Boolean,
    required: true
  },
  title: {
    type: String,
    default: ''
  },
  width: {
    type: String,
    default: '30%'
  },
  onSubmit: {
    type: Function,
    default: () => {}
  },
  onClose: {
    type: Function,
    default: () => {}
  },
})

let emits = defineEmits('submit', 'close');

</script>
<template>
  <el-dialog
    v-model="show"
    draggable
    :title="title"
    :width="width"
    :before-close="() => emits('close')"
  >
    <template #header="{ close, titleId, titleClass }" v-if="!title">
      <slot name="header" :close="close" :titleId="titleId" :titleClass="titleClass"></slot>
    </template>
    <slot></slot>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="() => emits('close')">Cancel</el-button>
        <el-button type="primary" @click="() => emits('submit')">
          Confirm
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<style scoped lang="less">
.dialog-footer{
  display: flex;
  justify-content: center;
}
</style>